<template>
	<div class="courseBooking">

		<!--视频播放-->
		<div class="video">
			<video src="../../../../static/images/courseBooking/video.mp4" binderror="videoErrorCallback"></video>
		</div>
		<!--视频播放结束-->

		<!--瑜伽馆的基本信息-->
		<div class="collage_info">
			<!--版心-->
			<div class="collage_wrap">
				<div class="collage_store">
					<div class="store_left">
						<h1>爱好瑜伽</h1>
						<p>专业的教练，专业的指导，专业的训练</p>
					</div>
					<div class="store_right">
						<h1>0分</h1>
						<p>
							<span>0评价</span>
							<i-icon type="enter" size="14" color="#444444" />
						</p>
					</div>
				</div>
				<!-- 营业时间 -->
				<div class="collage_time">
					<i-icon type="time" size="16" color="#bebebe" style="margin-top: -2px;" />
					<span>营业时间：09:30~19:30</span>
				</div>
				<!-- 营业时间结束 -->
				<div class="collage_tel">
					<i-icon type="mobilephone" size="18" color="#bebebe" style="margin-top: -4px;" />
					<span>151-3593-4855</span>
				</div>
				<div class="collage_map">
					<div class="map_left">
						<i-icon type="coordinates" size="18" color="#bebebe" />
						<span>北京市西城区建工大厦A座4层</span>
					</div>
					<div class="map_right">
						<span>地图</span>
						<i-icon type="enter" size="16" color="#7c7c7c" style="margin-top: -4px;" />
					</div>
				</div>
			</div>
			<!--版心结束-->
		</div>

		<div class="collage_date">
			<!--日期滚动-->
			<div class="data_date">
				<scroll-view scroll-x="true" class="scroll-box">
					<ul class="ul">
						<li class="li">
							<p class="p">01-20</p>
							<span class="span">星期日</span>
						</li>
						<li class="li">
							<p class="p">01-21</p>
							<span class="span">星期一</span>
						</li>
						<li class="li">
							<p class="p">01-20</p>
							<span class="span">星期日</span>
						</li>
						<li class="li">
							<p class="p">01-21</p>
							<span class="span">星期一</span>
						</li>
						<li class="li">
							<p class="p">01-20</p>
							<span class="span">星期日</span>
						</li>

					</ul>
				</scroll-view>

			</div>
			<!--日期滚动结束-->
			<div class="collage_make">
				<ul class="collage_ul">
					<li class="collage_list">
						<div class="collage_li">
							<dl class="collage_dl">
								<dt class="collage_dt">
                  <h1>14:00</h1>
                  <p>(60分钟 )</p>
                </dt>
								<dd class="collage_dd">
									<p>肩颈理疗</p>
									<div class="collage_go">
										<span>王莹莹</span>
									</div>
									<p>还可预约6人</p>
									<div class="xing">
										<span>难易程度</span>
										<div class="collage_xing" style="margin-top: -3px;margin-left: 5px;">
											<i-cell title="禁用点击和手势选择星" style="line-height: 12px;">
												<i-rate disabled="false" value="" size="14">
												</i-rate>
											</i-cell>
										</div>
									</div>
								</dd>
							</dl>

							<button @click="course">预约</button>
						</div>
					</li>
				</ul>
			</div>

		</div>

	</div>
</template>
</script>
<script>
	var network = require("../../../utils/commonality.js")
	export default {
		data() {
			return {
				starIndex4: 4
			}
		},
		methods: {
        course(){
        	console.log(111)
        	wx.navigateTo({
					url: '../appointment_course/main'
				})
        },
        getUserInfo() {
				// 调用登录接口
				wx.login({
					success: () => {
						wx.getUserInfo({
							success: (res) => {
								this.userInfo = res.userInfo
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	/*视频播放*/
	
	.video {
		width: 100%;
		height: 210px;
	}
	
	.video video {
		width: 100%;
		height: 200px;
	}
	/*视频播放结束*/
	/*瑜伽馆的基本信息*/
	
	.collage_info {
		width: 100%;
		border-bottom: 10px solid #eeeeee;
	}
	
	.collage_info .collage_wrap {
		width: 92%;
		margin: 0 auto;
	}
	
	.collage_info .collage_wrap .collage_store {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 0;
		text-align: left;
		border-bottom: 1px solid #ccc;
	}
	
	.collage_info .collage_wrap .collage_store .store_left {
		width: 75%;
	}
	
	.collage_info .collage_wrap .collage_store .store_left h1 {
		font-size: 16px;
		/* letter-spacing:0.0625rem; */
		font-weight: bold;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.collage_info .collage_wrap .collage_store .store_left p {
		text-align: left;
		margin-top: 10px;
		color: #7c7c7c;
		font-size: 13px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.collage_info .collage_wrap .collage_store .store_right {
		padding-left: 15px;
		border-left: 1px solid #ccc;
	}
	
	.collage_info .collage_wrap .collage_store .store_right h1 {
		color: #fed403;
		font-size: 18px;
		font-weight: normal;
		padding-top: 2px
	}
	
	.collage_info .collage_wrap .collage_store .store_right p {
		width: 100%;
		text-align: left;
		margin-top: 8px;
		color: #444444;
		float: left;
	}
	
	.collage_info .collage_wrap .collage_store .store_right p span {
		text-align: left;
		font-size: 14px;
		letter-spacing: 1px;
		color: #444444;
		margin-right: 3px;
		float: left;
	}
	
	.collage_info .collage_wrap .collage_store .store_right p i-icon {
		color: #444444;
		margin-top: -5px;
		float: right;
	}
	/* 营业时间 */
	
	.collage_info .collage_wrap .collage_time {
		width: 100%;
		display: flex;
		align-items: center;
		text-align: left;
		border-bottom: 1px solid #ccc;
		padding: 17px 0;
	}
	
	.collage_info .collage_wrap .collage_time span {
		margin-left: 6px;
		font-size: 14px;
		color: #000000;
	}
	/* 营业时间结束 */
	/*电话*/
	
	.collage_info .collage_wrap .collage_tel {
		width: 100%;
		display: flex;
		align-items: center;
		text-align: left;
		padding: 17px 0;
		border-bottom: 1px solid #ccc;
	}
	
	.collage_info .collage_wrap .collage_tel span {
		font-size: 14px;
		/*letter-spacing: .0625rem;*/
		margin-left: 6px;
		color: #000000;
	}
	/*电话结束*/
	/*地图*/
	
	.collage_info .collage_wrap .collage_map {
		width: 100%;
		padding: 17px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		/*border-bottom: 1px solid #ccc;*/
	}
	
	.collage_info .collage_wrap .collage_map .map_left {
		width: 85%;
		display: flex;
		align-items: center;
	}
	
	.collage_info .collage_wrap .collage_map .map_left img {
		width: .75rem;
		height: 14.5px;
	}
	
	.collage_info .collage_wrap .collage_map .map_left span {
		width: 90%;
		text-align: left;
		font-size: 14px;
		letter-spacing: 1px;
		margin-left: 5px;
	}
	
	.collage_info .collage_wrap .collage_map .map_right {
		display: flex;
		align-items: center;
	}
	
	.collage_info .collage_wrap .collage_map .map_right span {
		color: #7c7c7c;
		font-size: 14px;
		letter-spacing: 1px;
		margin-left: 5px;
	}
	
	.collage_info .collage_wrap .collage_map .map_right i {
		color: #c2c2c2;
	}
	/*地图结束*/
	/*瑜伽馆的基本信息结束*/
	
	.data_date {
		width: 100%;
		margin-top: 15px;
		padding-bottom: 17px;
		border-bottom: 1px solid #cdcdcd;
		margin-left: 20px;
		/*float: left;*/
		/*overflow: hidden;*/
	}
	
	.data_date .scroll-box {
		width: 100%;
		/*float: left;*/
		/*overflow: hidden;*/
	}
	
	.data_date .scroll-box .ul {
		width: 100%;
		height: 52px;
		margin: 0 auto;
		/*float: left;*/
		/*display: flex;
  align-items: center;*/
	}
	
	.data_date .scroll-box .ul .li {
		width: 60px;
		height: 50px;
		margin-right: 10px;
		text-align: center;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 6px;
		float: left;
	}
	
	.data_date .scroll-box .ul .li .p {
		width: 100%;
		height: 23px;
		font-size: 12px;
		line-height: 23px;
		color: #444444;
		/*flex-wrap:warp;*/
	}
	
	.data_date .scroll-box .ul .li .span {
		width: 100%;
		height: 23px;
		font-size: 12px;
		line-height: 23px;
		/*flex-wrap:warp;*/
		display: block;
		color: #444444;
	}
	
	.collage_make {
		width: 100%;
		float: left;
	}
	
	.collage_make .collage_ul {
		width: 100%;
	}
	
	.collage_make .collage_ul .collage_list {
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	
	.collage_make .collage_ul .collage_list .collage_li {
		width: 94%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl {
		display: flex;
		align-items: center;
		text-align: left;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dt h1 {
		font-size: 18px;
		color: #444444;
		font-weight: bold;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dt p {
		line-height: 32px;
		font-size: 14px;
		text-align: left;
		color: #cdcdcd;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dd p:first-child {
		color: #000000;
		text-align: left;
		font-size: 14px;
		font-weight: bold;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dd {
		text-align: left;
		margin-left: 15px;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dd p {
		line-height: 22px;
		text-align: left;
		font-size: 14px;
		/* letter-spacing: .125rem; */
		color: #606060;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dd .collage_go {
		line-height: 22px;
		text-align: left;
		/* letter-spacing: .125rem; */
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dd .collage_go span {
		font-size: 14px;
		color: #f0b92b;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dd .xing {
		line-height: 22px;
		text-align: left;
		display: flex;
	}
	
	.collage_make .collage_ul .collage_list .collage_li .collage_dl .collage_dd .xing span {
		font-size: 14px;
		color: #606060;
	}
	
	.collage_make .collage_ul .collage_list .collage_li button {
		height: 26px;
		line-height: 26px;
		color: #000000;
		background: #fed403;
		font-size: 14px;
		border-radius: 3px;
		border: none;
		outline: none;
		text-align: center;
		margin: 0;
		flex-wrap: wrap;
	}
</style>